//颜色
@main-color: #1AC777;
@orange-color: #FFA200;
@light-green: #30D290;
@black-color: #000000;
@base-background-color: #EFEFEF;
@content-background-color: #FFFFFF;
@double-grey-text-color: #3B3B3B;
@grey-text-color: #646464;
@light-grey-text-color: #a7a7a7;
@dividing-line: #DBDBDB;
@border-line: #CCCCCC;
@btn-grey: #959595;
//圆角
@radius-2: 2px;
@radius-4: 4px;
@radius-circle: 50%;
//阴影
@box-shadow-14: 1px 1px 2px rgba(0, 0, 0, 0.14);
@box-shadow-30: 1px 1px 2px rgba(0, 0, 0, 0.3);
//字体（px）
@large-font: 18px;
@middle-font: 14px;
@small-font: 12px;
@sixteen-font: 16px;
@fifteen-font: 15px;
@thirteen-font: 13px;
//字体（rem）
@large-font-rem: .48rem;
@middle-font-rem: .373rem;
@small-font-rem: .32rem;
@fifteen-font-rem: .4rem;
@sixteen-font-rem: .426rem;
@thirteen-font-rem: .346rem;
//字体行高(px)
@large-text-line-height: 25px;
@middle-text-line-height: 22px;
@small-text-line-height: 20px;
@sixteen-text-line-height: 16px;
@thirteen-text-line-height: 17px;
//字体行高（rem）
@large-text-line-height-rem: .66rem;
@middle-text-line-height-rem: .58rem;
@small-text-line-height-rem: .53rem;
@sixteen-text-line-height-rem: .42rem;
@thirteen-text-line-height-rem: .45rem;
//边距(rem)
@2px-rem: .053rem;
@4px-rem: .106rem;
@5px-rem: .133rem;
@8px-rem: .213rem;
@10px-rem: .266rem;
@16px-rem: .426rem;
//边距(px)
@2px: 2px;
@4px: 4px;
@5px: 5px;
@8px: 8px;
@10px: 10px;
@16px: 16px;
//按钮（px）
@align-center: center;
@btn-border-radius: 2px;

@solid-btn-large-line-height: 45px;
@solid-btn-large-height: 45px;

@solid-btn-middle-line-height: 42.5px;
@solid-btn-middle-height: 42.5px;

@solid-btn-small-line-height: 24px;
@solid-btn-small-height: 24px;

@frame-btn-big-line-height: 30px;
@frame-btn-big-height: 30px;

@frame-btn-small-line-height: 20px;
@frame-btn-small-height: 20px;

//按钮（rem）
@solid-btn-large-line-height-rem: 1.2rem;
@solid-btn-large-height-rem: 1.2rem;

@solid-btn-middle-line-height-rem: 1.133rem;
@solid-btn-middle-height-rem: 1.133rem;

@solid-btn-small-line-height-rem: .64rem;
@solid-btn-small-height-rem: .64rem;

@frame-btn-big-line-height-rem: .8rem;
@frame-btn-big-height-rem: .8rem;

@frame-btn-small-line-height-rem: .53rem;
@frame-btn-small-height-rem: .53rem;

//基础配置
html {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  //-moz-appearance:none;
  border-radius: 0;
  -webkit-appearance: none;
}

textarea{
  //-moz-appearance:none;
  border-radius: 0;
  -webkit-appearance: none;
}
//&.router-link-exact-active {
//  color: #42b983;
//}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  position: relative;
  height: 100%;
  margin: 0 auto !important;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  word-break: break-all;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

ul, p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

textarea {
  outline: none;
  resize: none;
}

.mr-R-container {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
}

.mr-R-content {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

//布局
.to-inline-block {
  display: inline-block;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
  max-width: 540px;
}

//常用布局

.flex-center-between {
  .fx-row;
  .fx-row-space-between;
  .fx-row-center;
}

.flex-center-center {
  .fx-row;
  .fx-row-center;
  .fx-row-middle;
}

//横向滚动
.scroll-x {
  overflow: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
//竖向滚动
.scroll-y{
  overflow: hidden;
  overflow-y: scroll;
  white-space: nowrap;
}

.pop-fixed {
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  .position-fixed;
  .fx-row;
  .fx-row-center;
  .fx-row-middle;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.border-bottom-1px {
  border-bottom: 1px solid #ddd;
}
.border-bottom-updata{
  border-bottom: 1px solid #f0f0f0;
}

//文字加粗
.font-bold {
  font-weight: bold;
}

//对齐
.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-text-bottom {
  vertical-align: text-bottom;
}

.vertical-bottom {
  vertical-align: bottom;
}

.vertical-align-top {
  vertical-align: top;
}

.border-color(@color) {
  border: 1px solid @color;
}

.background-color(@color) {
  background-color: @color;
}

//内边距
.padding(@value) {
  padding: @value;
}

.top-padding(@top_value) {
  padding-top: @top_value;
}

.bottom-padding(@bottom_value) {
  padding-bottom: @bottom_value;
}

.left-padding(@left_value) {
  padding-left: @left_value;
}

.right-padding(@right_value) {
  padding-right: @right_value;
}

.tb-padding(@tb_value) {
  padding: @tb_value 0;
}

.lr-padding(@lr_value) {
  padding: 0 @lr_value;
}

//外边距

.margin(@value) {
  margin: @value;
}

.top-margin(@top_value) {
  margin-top: @top_value;
}

.bottom-margin(@bottom_value) {
  margin-bottom: @bottom_value;
}

.left-margin(@left_value) {
  margin-left: @left_value;
}

.right-margin(@right_value) {
  margin-right: @right_value;
}

.tb-margin(@tb_value) {
  margin: @tb_value 0;
}

.lr-margin(@lr_value) {
  margin: 0 @lr_value;
}

//颜色类
.content-background-color {
  background-color: @content-background-color;
}

.base-background-color {
  background-color: @base-background-color;
}

.main-color {
  background-color: @main-color;
}


.orange-background-color {
  background-color: @orange-color;
}

.light-green-background-color {
  background-color: @light-green;
}

.btn-grey-background-color {
  background-color: @btn-grey;
}

.white-color-90 {
  color: #fff;
  opacity: .9;
}
.white-color {
  color: #fff;
}

.white-color-60 {
  color: #fff;
  opacity: .6;
}

.dividing-line {
  color: @dividing-line;
}

.border-line {
  color: @border-line;
}

.grey-background-color {
  background-color: @light-grey-text-color;
}

//边线颜色
.border-main {
  border: 1px solid @main-color;
}

.border-grey {
  border: 1px solid @light-grey-text-color;
}
.border-grey-bottom{
  border-bottom: 1px solid #e7e7e7 !important;
}

.border-orange {
  border: 1px solid @orange-color;
}


//字体颜色
.text-main {
  color: @main-color;
}

.black-text-color{
  color: @black-color;
}

.light-green-text-color {
  color: @light-green;
}

.orange-text-color {
  color: @orange-color;
}

.grey-text-color {
  color: @grey-text-color;
}

.double-grey-text-color {
  color: @double-grey-text-color;
}

.light-grey-text-color {
  color: @light-grey-text-color;
}

//
// 体类（px）
.large-font {
  font-size: @large-font;
  line-height: @large-text-line-height;
}

.middle-font {
  font-size: @middle-font;
  line-height: @middle-text-line-height;
}

.small-font {
  font-size: @small-font;
  line-height: @small-text-line-height;
}

.fifteen-font {
  font-size: @fifteen-font;
}

.sixteen-font {
  font-size: @sixteen-font;
  line-height: @sixteen-text-line-height;
}

.thirteen-font {
  font-size: @thirteen-font;
  line-height: @thirteen-text-line-height;
}

//字体类（rem）
.large-font-rem {
  font-size: @large-font-rem;
  line-height: @large-text-line-height-rem;
}

.middle-font-rem {
  font-size: @middle-font-rem;
  line-height: @middle-text-line-height-rem;
}

.small-font-rem {
  font-size: @small-font-rem;
  line-height: @small-text-line-height-rem;
}

.fifteen-font-rem {
  font-size: @fifteen-font-rem;
}

.sixteen-font-rem {
  font-size: @sixteen-font-rem;
  line-height: @sixteen-text-line-height-rem;
}

.thirteen-font-rem {
  font-size: @thirteen-font-rem;
  line-height: @thirteen-text-line-height-rem;
}

//内边距类(rem)
.padding-2px-rem {
  .padding(@2px-rem);
}

.top-padding-2px-rem {
  .top-padding(@2px-rem);
}

.bottom-padding-2px-rem {
  .bottom-padding(@2px-rem);
}

.left-padding-2px-rem {
  .left-padding(@2px-rem);
}

.right-padding-2px-rem {
  .right-padding(@2px-rem);
}

.lr-padding-2px-rem {
  .lr-padding(@2px-rem);
}

.tb-padding-2px-rem {
  .tb-padding(@2px-rem);
}

.padding-4px-rem {
  .padding(@4px-rem);
}

.top-padding-4px-rem {
  .top-padding(@4px-rem);
}

.bottom-padding-4px-rem {
  .bottom-padding(@4px-rem);
}

.left-padding-4px-rem {
  .left-padding(@4px-rem);
}

.right-padding-4px-rem {
  .right-padding(@4px-rem);
}

.lr-padding-4px-rem {
  .lr-padding(@4px-rem);
}

.tb-padding-4px-rem {
  .tb-padding(@4px-rem);
}

.padding-8px-rem {
  .padding(@8px-rem);
}

.top-padding-8px-rem {
  .top-padding(@8px-rem);
}

.bottom-padding-8px-rem {
  .bottom-padding(@8px-rem);
}

.left-padding-8px-rem {
  .left-padding(@8px-rem);
}

.right-padding-8px-rem {
  .right-padding(@8px-rem);
}

.lr-padding-8px-rem {
  .lr-padding(@8px-rem);
}

.tb-padding-8px-rem {
  .tb-padding(@8px-rem);
}

.padding-10px-rem {
  .padding(@10px-rem);
}

.top-padding-10px-rem {
  .top-padding(@10px-rem);
}

.bottom-padding-10px-rem {
  .bottom-padding(@10px-rem);
}

.left-padding-10px-rem {
  .left-padding(@10px-rem);
}

.right-padding-10px-rem {
  .right-padding(@10px-rem);
}

.lr-padding-10px-rem {
  .lr-padding(@10px-rem);
}

.tb-padding-10px-rem {
  .tb-padding(@10px-rem);
}

//内边距类（px）
.padding-2 {
  .padding(@2px);
}

.top-padding-2 {
  .top-padding(@2px);
}

.bottom-padding-2 {
  .bottom-padding(@2px);
}

.left-padding-2 {
  .left-padding(@2px);
}

.right-padding-2 {
  .right-padding(@2px);
}

.lr-padding-2 {
  .lr-padding(@2px);
}

.tb-padding-2 {
  .tb-padding(@2px);
}

.padding-4 {
  .padding(@4px);
}

.top-padding-4 {
  .top-padding(@4px);
}

.bottom-padding-4 {
  .bottom-padding(@4px);
}

.left-padding-4 {
  .left-padding(@4px);
}

.right-padding-4 {
  .right-padding(@4px);
}

.lr-padding-4 {
  .lr-padding(@4px);
}

.tb-padding-4 {
  .tb-padding(@4px);
}

.padding-8 {
  .padding(@8px);
}

.top-padding-8 {
  .top-padding(@8px);
}

.bottom-padding-8 {
  .bottom-padding(@8px);
}

.left-padding-8 {
  .left-padding(@8px);
}

.right-padding-8 {
  .right-padding(@8px);
}

.lr-padding-8 {
  .lr-padding(@8px);
}

.tb-padding-8 {
  .tb-padding(@8px);
}

.padding-10 {
  .padding(@10px);
}

.top-padding-10 {
  .top-padding(@10px);
}

.bottom-padding-10 {
  .bottom-padding(@10px);
}

.left-padding-10 {
  .left-padding(@10px);
}

.right-padding-10 {
  .right-padding(@10px);
}

.lr-padding-10 {
  .lr-padding(@10px);
}

.tb-padding-10 {
  .tb-padding(@10px);
}

//外边距类(rem)
.margin-2px-rem {
  .margin(@2px-rem);
}

.top-margin-2px-rem {
  .top-margin(@2px-rem);
}

.bottom-margin-2px-rem {
  .bottom-margin(@2px-rem);
}

.left-margin-2px-rem {
  .left-margin(@2px-rem);
}

.right-margin-2px-rem {
  .right-margin(@2px-rem);
}

.lr-margin-2px-rem {
  .lr-margin(@2px-rem);
}

.tb-margin-2px-rem {
  .tb-margin(@2px-rem);
}

.margin-4px-rem {
  .margin(@4px-rem);
}

.top-margin-4px-rem {
  .top-margin(@4px-rem);
}

.bottom-margin-4px-rem {
  .bottom-margin(@4px-rem);
}

.left-margin-4px-rem {
  .left-margin(@4px-rem);
}

.right-margin-4px-rem {
  .right-margin(@4px-rem);
}

.lr-margin-4px-rem {
  .lr-margin(@4px-rem);
}

.tb-margin-4px-rem {
  .tb-margin(@4px-rem);
}

.right-margin-5px-rem {
  margin-right: @5px-rem;
}

.margin-8px-rem {
  .margin(@8px-rem);
}

.top-margin-8px-rem {
  .top-margin(@8px-rem);
}

.bottom-margin-8px-rem {
  .bottom-margin(@8px-rem);
}

.left-margin-8px-rem {
  .left-margin(@8px-rem);
}

.right-margin-8px-rem {
  .right-margin(@8px-rem);
}

.lr-margin-8px-rem {
  .lr-margin(@8px-rem);
}

.tb-margin-8px-rem {
  .tb-margin(@8px-rem);
}

.margin-10px-rem {
  .margin(@10px-rem);
}

.top-margin-10px-rem {
  .top-margin(@10px-rem);
}

.bottom-margin-10px-rem {
  .bottom-margin(@10px-rem);
}

.left-margin-10px-rem {
  .left-margin(@10px-rem);
}

.left-margin-20px-rem {
  margin-left: .5333rem;
}

.right-margin-10px-rem {
  .right-margin(@10px-rem);
}

.lr-margin-10px-rem {
  .lr-margin(@10px-rem);
}

.tb-margin-10px-rem {
  .tb-margin(@10px-rem);
}

.tb-margin-20px-rem {
  margin: .533rem 0;
}

.tb-margin-large-rem {
  margin: .7rem 0;
}

//外边距类(px)
.margin-2 {
  .margin(@2px);
}

.top-margin-2 {
  .top-margin(@2px);
}

.bottom-margin-2 {
  .bottom-margin(@2px);
}

.left-margin-2 {
  .left-margin(@2px);
}

.right-margin-2 {
  .right-margin(@2px);
}

.lr-margin-2 {
  .lr-margin(@2px);
}

.tb-margin-2 {
  .tb-margin(@2px);
}

.margin-4 {
  .margin(@4px);
}

.top-margin-4 {
  .top-margin(@4px);
}

.bottom-margin-4 {
  .bottom-margin(@4px);
}

.left-margin-4 {
  .left-margin(@4px);
}

.right-margin-4 {
  .right-margin(@4px);
}

.lr-margin-4 {
  .lr-margin(@4px);
}

.tb-padding-4 {
  .tb-padding(@4px);
}

.margin-8 {
  .margin(@8px);
}

.top-margin-8 {
  .top-margin(@8px);
}

.bottom-margin-8 {
  .bottom-margin(@8px);
}

.left-margin-8 {
  .left-margin(@8px);
}

.right-margin-8 {
  .right-margin(@8px);
}

.lr-margin-8 {
  .lr-margin(@8px);
}

.tb-margin-8 {
  .tb-margin(@8px);
}

.margin-10 {
  .margin(@10px);
}

.top-margin-10 {
  .top-margin(@10px);
}

.bottom-margin-10 {
  .bottom-margin(@10px);
}

.left-margin-10 {
  .left-margin(@10px);
}

.right-margin-10 {
  .right-margin(@10px);
}

.lr-margin-10 {
  .lr-margin(@10px);
}

.tb-margin-10 {
  .tb-margin(@10px);
}

//按钮类(px)

/*可点击*/
.large-solid-btn {
  width: 335px;
  display: inline-block;
  height: @solid-btn-large-height;
  text-align: @align-center;
  line-height: @solid-btn-large-line-height;
  border-radius: @radius-2;
  font-size: @large-font;
  color: #fff;
}

.middle-solid-btn {
  display: inline-block;
  height: @solid-btn-middle-height;
  .lr-padding(@16px);
  line-height: @solid-btn-middle-line-height;
  border-radius: @radius-2;
  font-size: @sixteen-font;
  color: #fff;
}

.small-solid-btn {
  display: inline-block;
  height: @solid-btn-small-height;
  .lr-padding(@16px);
  line-height: @solid-btn-small-line-height;
  border-radius: @radius-2;
  font-size: @small-font;
  color: #fff;
}

.frame-big-btn {
  display: inline-block;
  height: @frame-btn-big-height;
  line-height: @frame-btn-big-height;
  .lr-padding(@16px);
  font-size: @sixteen-font;
  border-radius: @radius-2;
}

.frame-small-btn {
  display: inline-block;
  height: @frame-btn-small-height;
  line-height: @frame-btn-small-height;
  .lr-padding(@8px);
  font-size: @small-font;
  border-radius: @radius-2;
}

//按钮类(rem)
.large-solid-btn-rem {
  display: inline-block;
  width: 8.93rem;
  height: @solid-btn-large-height-rem;
  text-align: @align-center;
  line-height: @solid-btn-large-line-height-rem;
  border-radius: @radius-2;
  font-size: @large-font;
  color: #fff;
}

.middle-solid-btn-rem {
  display: inline-block;
  height: @solid-btn-middle-height-rem;
  .lr-padding(@16px-rem);
  line-height: @solid-btn-middle-line-height-rem;
  border-radius: @radius-2;
  font-size: @sixteen-font;
  color: #fff;
}

.small-solid-btn-rem {
  display: inline-block;
  height: @solid-btn-small-height-rem;
  .lr-padding(@16px-rem);
  line-height: @solid-btn-small-line-height-rem;
  border-radius: @radius-2;
  color: #fff;
  font-size: @small-font;
}

.frame-big-btn-rem {
  display: inline-block;
  height: @frame-btn-big-height-rem;
  line-height: @frame-btn-big-height-rem;
  .lr-padding(@16px-rem);
  font-size: @sixteen-font;
  border-radius: @radius-2;
}

.frame-small-btn-rem {
  display: inline-block;
  height: @frame-btn-small-height-rem;
  line-height: @frame-btn-small-height-rem;
  .lr-padding(@8px-rem);
  font-size: @small-font;
  border-radius: @radius-2;
}

//不可点击
.border-line {
  background-color: @border-line !important; //纯色按钮不可点击
}

//.main-color-white-50 {
//  border-color: @main-color-white-50 !important;
//  color: @main-color-white-50 !important;
//}
//
//.color-orange-white-50 {
//  border-color: @color-orange-white-50 !important;
//  color: @color-orange-white-50 !important;
//}
//
//.color-blue-white-50 {
//  border-color: @color-blue-white-50 !important;
//  color: @color-blue-white-50 !important;
//}
//
//.color-green-white-50 {
//  border-color: @color-green-white-50 !important;
//  color: @color-green-white-50 !important;
//}
//
////点击状态
//.solid-main-color-black-30 {
//  background-color: @main-color-black-30 !important;
//  //color: rgba(0,0,0 0.3) !important;
//}
//
//.solid-color-orange-black-30 {
//  background-color: @color-orange-black-30 !important;
//  //color: rgba(0,0,0 0.3) !important;
//}
//
//.solid-color-blue-black-30 {
//  background-color: @color-blue-black-30 !important;
//  //color: rgba(0,0,0 0.3) !important;
//}
//
//.solid-color-green-black-30 {
//  background-color: @color-green-black-30 !important;
//  //color: rgba(0,0,0 0.3) !important;
//}
//
//.frame-main-color-black-30 {
//  border-color: @main-color-black-30 !important;
//  color: @main-color-black-30 !important;
//}
//
//.frame-color-orange-black-30 {
//  border-color: @color-orange-black-30 !important;
//  color: @color-orange-black-30 !important;
//}
//
//.frame-color-blue-black-30 {
//  border-color: @color-blue-black-30 !important;
//  color: @color-blue-black-30 !important;
//}
//
//.frame-color-green-black-30 {
//  border-color: @color-green-black-30 !important;
//  color: @color-green-black-30 !important;
//}

//输入框(px)
.common-input {
  padding: @5px @10px;
  font-size: @middle-font;
  border-radius: @radius-2;
}

.single-input {
  .common-input;
  color: @light-grey-text-color;
  border: .5px solid @border-line;
}

.single-input-click {
  .common-input;
  color: @grey-text-color;
  border: 1px solid @grey-text-color;
}

.textarea {
  .common-input;
  color: @light-grey-text-color;
  border: .5px solid @border-line;
}

.textarea-click {
  .common-input;
  color: @grey-text-color;
  border: 1px solid @grey-text-color;
}

//输入框(rem)
.common-input-rem {
  padding: @5px-rem @10px-rem;
  font-size: @middle-font-rem;
  border-radius: @radius-2;
}

.single-input-rem {
  .common-input-rem;
  color: @light-grey-text-color;
  border: .5px solid @border-line;
}

.single-input-click-rem {
  .common-input-rem;
  color: @grey-text-color;
  border: 1px solid @grey-text-color;
}

.textarea-rem {
  .common-input-rem;
  color: @light-grey-text-color;
  border: .5px solid @border-line;
}

.textarea-click-rem {
  .common-input-rem;
  color: @grey-text-color;
  border: 1px solid @grey-text-color;
}

//横向滚动
.scroll-x {
  overflow: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
//竖向滚动
.scroll-y{
  overflow: hidden;
  overflow-y: scroll;
  white-space: nowrap;
}

//卡片
.area-card {
  background-color: @content-background-color;
  box-shadow: @box-shadow-14;
}

.most-card {
  background-color: @content-background-color;
  box-shadow: @box-shadow-30;
  border-radius: @radius-2;
}

.works-card {
  background-color: @content-background-color;
  box-shadow: @box-shadow-30;
  border-radius: @radius-4;
}

//标签(px)
.tag-common {
  display: inline-block;
  line-height: @solid-btn-small-line-height;
  height: @solid-btn-small-height;
  font-size: @middle-font;
  .lr-padding(@16px);
}

.tag-no-select-square {
  .tag-common;
  color: @light-grey-text-color;
  border: 1px solid @light-grey-text-color;
  border-radius: @radius-2;
}

.tag-no-select-circle {
  .tag-common;
  color: @light-grey-text-color;
  border: 1px solid @light-grey-text-color;
  border-radius: 14px;
}

.tag-square {
  .tag-common;
  color: #fff;
  border-radius: @radius-2;
}

.tag-circle {
  .tag-common;
  color: #fff;
  border-radius: 14px;
}

.tag-small {
  display: inline-block;
  font-size: @small-font;
  height: 20px;
  line-height: 20px;
  border-radius: @radius-2;
  .lr-padding(@8px);
}

.tag-small-grey {
  .tag-small;
  .border-grey;
  .light-grey-text-color;

}

.tag-small-pink {
  .tag-small;
  .border-main;
  .text-main;
}

.tag-small-orange {
  .tag-small;
  .border-orange;
}

//标签(rem)
.tag-common-rem {
  display: inline-block;
  line-height: @solid-btn-small-line-height-rem;
  height: @solid-btn-small-height-rem;
  font-size: @middle-font-rem;
  .lr-padding(@16px-rem);
}

.tag-no-select-square-rem {
  .tag-common-rem;
  color: @light-grey-text-color;
  border: 1px solid @light-grey-text-color;
  border-radius: @radius-2;
}

.tag-no-select-circle-rem {
  .tag-common-rem;
  color: @light-grey-text-color;
  border: 1px solid @light-grey-text-color;
  border-radius: 14px;
}

.tag-square-rem {
  .tag-common-rem;
  border-radius: @radius-2;
}

.tag-circle-rem {
  .tag-common-rem;
  border-radius: 0.373rem;
}

.tag-small-rem {
  display: inline-block;
  font-size: @small-font-rem;
  height: .533rem;
  line-height: .533rem;
  border-radius: @radius-2;
  .lr-padding(@8px-rem);
}

.tag-small-grey-rem {
  .tag-small-rem;
  .border-grey;
  .light-grey-text-color;
}

.tag-small-pink-rem {
  .tag-small-rem;
  .border-main;
  .text-main;
}

.tag-small-orange-rem {
  .tag-small-rem;
  .border-orange;

}

.tag-small-blue-rem {
  .tag-small-rem;

}

.tag-small-green-rem {
  .tag-small-rem;

}

//头像(px)
.border-radius {
  border-radius: @radius-circle;
}

.big-head {
  position: relative;
  height: 60px;
  width: 60px;
  .to-inline-block;
  .border-radius;
}

.fifty-head {
  position: relative;
  height: 50px;
  width: 50px;
  .to-inline-block;
  .border-radius;
}

.middle-head {
  position: relative;
  height: 30px;
  width: 30px;
  .border-radius;
  .to-inline-block;
}

.small-head {
  position: relative;
  height: 24px;
  width: 24px;
  .border-radius;
  .to-inline-block;
}

//头像(rem)
.big-head-rem {
  position: relative;
  height: 1.8rem;
  width: 1.8rem;
  .to-inline-block;
  .border-radius;
}

.middle-head-rem {
  position: relative;
  height: 1.3826rem;
  width: 1.3826rem;
  .to-inline-block;
  .border-radius;
}

.small-head-rem {
  position: relative;
  height: 0.64rem;
  width: 0.64rem;
  .to-inline-block;
  .border-radius;
}

//认证
.icon-teacher-middle {
  position: absolute;
  width: 14px;
  height: 14px;
  right: 0;
  bottom: 0;
}

.icon-teacher-middle-rem {
  position: absolute;
  width: .373rem;
  height: .373rem;
  right: 0;
  bottom: 0;
}

//文本超出省略
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.line-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/**
 * flexbox布局方式
 */
/**
 * 向从左到右排列（左对齐）
 * <div class="fx-row"></div>
 */
.fx-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

/**
 * 向从左到右排列（右边对齐）
 * <div class="fx-row"></div>
 */
.fx-row-reverse {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/**
 * 纵向从上往下排列（顶对齐）
 * <div class="fx-column"></div>
 */
.fx-column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/**
 * 纵向从上往下排列（底部对齐）
 * <div class="fx-column"></div>
 */
.fx-column-reverse {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

/**
 * wrap策略
 */
.fx-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/**
 * 子项目排列
 * <div class="fx-col"></div>
 */
.fx, .fx-1, .fx-2, .fx-3, .fx-4, .fx-5, .fx-6, .fx-7, .fx-8, .fx-9 {
  display: block;
  width: 100%;
}

/** auto(1 1 auto) **/
.fx-auto {
  -webkit-flex: auto;
  -moz-flex: auto;
  -ms-flex: auto;
  flex: auto;
}

.fx-none {
  -webkit-flex: none;
  -moz-flex: none;
  -ms-flex: none;
  flex: none;
}

.fx {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.fx-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.fx-2 {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -moz-box-flex: 2;
  -moz-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

.fx-3 {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
  -moz-box-flex: 3;
  -moz-flex: 3;
  -ms-flex: 3;
  flex: 3;
}

.fx-4 {
  -webkit-box-flex: 4;
  -webkit-flex: 4;
  -moz-box-flex: 4;
  -moz-flex: 4;
  -ms-flex: 4;
  flex: 4;
}

.fx-5 {
  -webkit-box-flex: 5;
  -webkit-flex: 5;
  -moz-box-flex: 5;
  -moz-flex: 5;
  -ms-flex: 5;
  flex: 5;
}

.fx-6 {
  -webkit-box-flex: 6;
  -webkit-flex: 6;
  -moz-box-flex: 6;
  -moz-flex: 6;
  -ms-flex: 6;
  flex: 6;
}

.fx-7 {
  -webkit-box-flex: 7;
  -webkit-flex: 7;
  -moz-box-flex: 7;
  -moz-flex: 7;
  -ms-flex: 7;
  flex: 7;
}

.fx-8 {
  -webkit-box-flex: 8;
  -webkit-flex: 8;
  -moz-box-flex: 8;
  -moz-flex: 8;
  -ms-flex: 8;
  flex: 8;
}

.fx-9 {
  -webkit-box-flex: 9;
  -webkit-flex: 9;
  -moz-box-flex: 9;
  -moz-flex: 9;
  -ms-flex: 9;
  flex: 9;
}

/**
 * 栅格布局
 */
.gird-5 {
  width: 5%;
}

.gird-10 {
  width: 10%;
}

.gird-15 {
  width: 15%;
}

.gird-20 {
  width: 20%;
}

.gird-25 {
  width: 25%;
}

.gird-30 {
  width: 30%;
}

.gird-33 {
  width: 33.333333333333336%;
}

.gird-40 {
  width: 40%;
}

.gird-50 {
  width: 50%;
}

.gird-60 {
  width: 60%;
}

.gird-66 {
  width: 66.66666666666666%;
}

.gird-70 {
  width: 70%;
}

.gird-75 {
  width: 75%;
}

.gird-80 {
  width: 80%;
}

.gird-85 {
  width: 85%;
}

.gird-90 {
  width: 90%;
}

.gird-95 {
  width: 95%;
}

.gird-100 {
  width: 100%;
}

/**
 * 垂直方向
 * 子元素沿着侧轴排列方式
 * align-items : flex-start | flex-end | center | baseline | stretch;
 */
.fx-row-top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
}

.fx-row-bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
}

.fx-row-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}

.fx-row-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  align-items: stretch;
}

.fx-row-baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  -moz-align-items: baseline;
  align-items: baseline;
}

/**
 * 水平方向
 * 子元素沿着主轴排列方式
 * justify-content: flex-start | flex-end | center | space-between | space-around;
 */
.fx-row-left {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}

.fx-row-middle {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}

.fx-row-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}

.fx-row-space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
}

.fx-row-space-around {
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
}

/**
 * 覆盖父元素的align-items属性，定义了单独的弹性子元素如何沿着侧轴排列
 */
.fx-col-top {
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.fx-col-bottom {
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.fx-col-center {
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.fx-col-left {
  -webkit-align-content: flex-start;
  -moz-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.fx-col-right {
  -webkit-align-content: flex-end;
  -moz-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

.fx-col-middle {
  -webkit-align-content: center;
  -moz-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

.fx-col-space-between {
  -webkit-align-content: space-between;
  -moz-align-content: space-between;
  -ms-flex-line-pack: space-between;
  align-content: space-between;
}

.fx-col-space-around {
  -webkit-align-content: space-around;
  -moz-align-content: space-around;
  -ms-flex-line-pack: space-around;
  align-content: space-around;
}

.fx-shrink-0 {
  flex-shrink: 0;
}

//todo vux库toast提示增加边距、调整距离底部边距
.weui-toast {
  padding: 0 5px !important;
}

//todo vux库toast调整距离底部边距
.weui-toast.vux-toast-bottom {
  bottom: 3.2rem !important;
}